<template>
	<view class="orderDetail">
		<view class="status">状态：{{getStatus(info.status)}}</view>
		<view class="content">
			<view class="statusText" v-if="[1,2,11,10].indexOf(info.status)>=0" style="font-weight: bold;align-items: center;margin-top: 10px;">
				<img style="width: 20px;height: 20px;margin-right: 8px;" src="@/static/shangmen.png" alt="">
				<view v-if="info.status === 2">请在{{removeLastThreeChars(info.timeout_time)}}之前将衣物送到门店</view>
				<view v-if="info.status === 4 && info.transfer_user">
					<!-- <view>预约取件时间：{{info.pickup_at_left}} - {{info.pickup_at_right}}</view> -->
					<view>衣物将由快递寄送至洗衣工厂完成清洗</view>
				</view>
				<view v-if="info.status === 4 && !info.transfer_user">
					<view>预约取件时间：{{removeLastThreeChars(info.pickup_at_left)}} - {{removeLastThreeChars(info.pickup_at_right)}}</view>
					<view>衣物将由快递寄送至洗衣工厂完成清洗</view>
				</view>
				<view v-if="(info.status === 3 || info.status === 1) && info.pickup_at_left">
					<view>预约取件时间：{{removeLastThreeChars(info.pickup_at_left)}} - {{removeLastThreeChars(info.pickup_at_right)}}</view>
				</view>
				<view v-if="info.status === 11">
					衣物清洗完成，请到门店自行取件
				</view>
				<view v-if="[8,10].indexOf(info.status)>=0">
					衣物清洗完成，将由快递或门店送回
				</view>
			</view>
			<view class="statusText" v-if="[4].indexOf(info.status)>=0 && !info.transfer_user" style="font-weight: bold;align-items: center;margin-top: 10px;">
				<img style="width: 20px;height: 20px;margin-right: 8px;" src="@/static/shangmen.png" alt="">
				<view v-if="info.status === 4 ">
					<!-- <view>预约取件时间：{{info.pickup_at_left}} - {{info.pickup_at_right}}</view> -->
					<view>衣物将由快递寄送至洗衣工厂完成清洗</view>
				</view>
			</view>
			<view class="statusText" v-if="[20,25,30,35].indexOf(info.status)>=0" style="font-weight: bold;align-items: center;margin-top: 10px;">
				<img style="width: 20px;height: 20px;margin-right: 8px;" src="@/static/shangmen.png" alt="">
				<view v-if="info.status === 20">
					<view>已发起售后，等待服务门店处理</view>
				</view>
				<view v-if="info.status === 25">
					<view>已退款，退款金额{{info.refund_money}}元</view>
				</view>
				<view v-if="info.status === 30">
					<view>已退款，退款金额{{info.refund_money}}元，赔付{{info.refund_extra_money}}元</view>
				</view>
				<view v-if="info.status === 35">
					<view>已退款，退款金额{{info.refund_money}}元，赠送优惠券</view>
				</view>
			</view>
			<view class="store" v-if="[20,25,30,35].indexOf(info.status)>=0 && info.transfer_user" style="margin-top: 10px;">
				<view>服务门店</view>
				<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px;">
					<view style="display: flex;align-items: center;width: 88%;flex-wrap: nowrap;">
						<img style="width: 30px;height: 30px;margin-right: 10px;" src="@/static/dingwei1.png" alt="">
						<view style="width: 88%;">
							<view style="font-weight: bold;margin-bottom: 8px;">{{!info.transfer_user ? (info.factory ? info.factory.factory_name : info.wash_store.store_name) : info.outlet.outlet_name}}</view>
							<view style="width: 88%;">
								<view v-if="info.transfer_province">{{info.transfer_province + info.transfer_city + info.transfer_district + info.transfer_detail}}</view>
								<view v-else>{{info.rept_province + info.rept_province + info.rept_district + info.rept_detail}}</view>
							</view>
						</view>
					</view>
					<view><img @click="callPhone(info)" style="width: 20px;height: 20px;" src="@/static/dianhua.png" alt=""></view>
				</view>
			</view>
			<view class="statusText" v-if="[9,8].indexOf(info.status)>=0 && !info.transfer_user" style="font-weight: bold;align-items: center;margin-top: 10px;">
				<img style="width: 20px;height: 20px;margin-right: 8px;" src="@/static/shangmen.png" alt="">
				<view v-if="[9].indexOf(info.status)>=0" >
					衣物清洗完成，将由快递或门店送回
				</view>
			</view>
			<view class="store" v-if="[9,8].indexOf(info.status)>=0 && info.transfer_user" style="margin-top: 10px;">
				<view>服务门店</view>
				<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px;">
					<view style="display: flex;align-items: center;width: 88%;flex-wrap: nowrap;">
						<img style="width: 30px;height: 30px;margin-right: 10px;" src="@/static/dingwei1.png" alt="">
						<view style="width: 88%;">
							<view style="font-weight: bold;margin-bottom: 8px;">{{!info.transfer_user ? (info.factory ? info.factory.factory_name : info.wash_store.store_name) : info.outlet.outlet_name}}</view>
							<view style="width: 88%;">
								<view v-if="info.transfer_province">{{info.transfer_province + info.transfer_city + info.transfer_district + info.transfer_detail}}</view>
								<view v-else>{{info.rept_province + info.rept_province + info.rept_district + info.rept_detail}}</view>
							</view>
						</view>
					</view>
					<view><img @click="callPhone(info)" style="width: 20px;height: 20px;" src="@/static/dianhua.png" alt=""></view>
				</view>
			</view>
			<view class="store" v-if="[4].indexOf(info.status)>=0 && !info.transfer_user" style="margin-top: 10px;">
				<view style="display: flex;justify-content: space-between;">
					<view>寄送物流信息</view>
					<view v-if="info.waybill_route" style="color: #2c6cf4;white-space: nowrap;" @click="lookExpress(info.waybill_route)">查看物流</view>
				</view>
				<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px;">
					<view style="display: flex;align-items: center;width: 88%;flex-wrap: nowrap;">
						<img style="width: 30px;height: 30px;margin-right: 10px;" src="@/static/dingwei1.png" alt="">
						<view style="width: 88%;">
							<view v-if="info.waybill_route">{{info.waybill_route[0].remark}}</view>
							<view v-else>暂无物流信息</view>
						</view>
					</view>
				</view>
			</view>
			<view class="address" v-if="(info.status === 3 || info.status === 1)" style="margin-top: 10px;">
				<view style="position: relative;">
					<view class="line"></view>
					<view style="display: flex;">
						<view class="round">取</view>
						<view style="font-weight: bold;">
							<view>{{info.send_province + info.send_city + info.send_district + info.send_detail}}</view>
							<view>{{info.send_name + '  ' + info.send_phone}}</view>
						</view>
					</view>
					<view style="display: flex;margin-top: 10px;">
						<view class="round">收</view>
						<view style="font-weight: bold;">
							<view v-if="info.transfer_province">{{info.transfer_province + info.transfer_city + info.transfer_district + info.transfer_detail}}</view>
							<view v-else>{{info.rept_province + info.rept_province + info.rept_district + info.rept_detail}}</view>
							<view v-if="info.transfer_province">{{info.transfer_name + '  ' + info.transfer_phone}}</view>
							<view v-else>{{info.rept_name + '  ' + info.rept_phone}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="address" v-if="[9,8,10].indexOf(info.status)>=0 && !info.transfer_user" style="margin-top: 10px;">
				<view style="position: relative;">
					<view style="display: flex;border-bottom: 1px solid #f2f2f2;padding: 10px 0;">
						<view class="round">收</view>
						<view style="font-weight: bold;">
							<view>{{info.send_province + info.send_city + info.send_district + info.send_detail}}</view>
							<view>{{info.send_name + '  ' + info.send_phone}}</view>
						</view>
					</view>
					
					<view v-if="status == 10" style="margin-top: 10px;">您的衣物将由门店送回，最晚送达时间 {{removeLastThreeChars(info.timeout_time)}}</view>
					<view v-else style="margin-top: 10px;display:flex;justify-content: space-between;" >
						<view>{{info.waybill_route2?info.waybill_route2[0].remark:'暂无物流信息'}}</view>
						<view v-if="info.waybill_route2" style="color: #2c6cf4;white-space: nowrap;" @click="lookExpress(info.waybill_route2)">查看物流</view>
					</view>
				</view>
			</view>
			<view class="address" v-if="[13].indexOf(info.status)>=0 && info.waybill_route2" style="margin-top: 10px;">
				<view style="position: relative;">
					<view style="display: flex;border-bottom: 1px solid #f2f2f2;padding: 10px 0;">
						<view class="round">收</view>
						<view style="font-weight: bold;">
							<view>{{info.send_province + info.send_city + info.send_district + info.send_detail}}</view>
							<view>{{info.send_name + '  ' + info.send_phone}}</view>
						</view>
					</view>
					<view style="margin-top: 10px;display:flex;justify-content: space-between;" v-if="!info.transfer_user && !info.timeout_time">
						<view>{{info.waybill_route2?info.waybill_route2[0].remark:'暂无物流信息'}}</view>
						<view v-if="info.waybill_route2" style="color: #2c6cf4;white-space: nowrap;" @click="lookExpress(info.waybill_route2)">查看物流</view>
					</view>
					<view v-if="!info.transfer_user && info.timeout_time" style="margin-top: 10px;">您的衣物将由门店送回，最晚送达时间 {{removeLastThreeChars(info.timeout_time)}}</view>
				</view>
			</view>
			<view class="address" v-if="[14].indexOf(info.status)>=0" style="margin-top: 10px;">
				<view style="position: relative;">
					<view style="display: flex;justify-content: space-between;align-items: center;">
						<view style="display: flex;border-bottom: 1px solid #f2f2f2;padding: 10px 0;">
							<view class="round">收</view>
							<view style="font-weight: bold;">
								<view>{{info.send_province + info.send_city + info.send_district + info.send_detail}}</view>
								<view style="margin-top: 5px;">{{info.send_name + '  ' + info.send_phone}}</view>
							</view>
						</view>
						<view v-if="!pickup_at_left"><img @click="toMap(info,2)" style="width: 20px;height: 20px;" src="@/static/daohang.png" alt=""></view>
					</view>
					<view style="margin-top: 10px;display:flex;justify-content: space-between;" >
						<view>{{info.waybill_route2?info.waybill_route2[0].remark:'暂无物流信息'}}</view>
						<view v-if="info.waybill_route2" style="color: #2c6cf4;white-space: nowrap;" @click="lookExpress(info.waybill_route2)">查看物流</view>
					</view>
				</view>
			</view>
			<view class="store" v-if="[11].indexOf(info.status)>=0" style="margin-top: 10px;">
				<view>请到以下地址取件</view>
				<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px;">
					<view style="display: flex;align-items: center;width: 88%;flex-wrap: nowrap;">
						<img style="width: 30px;height: 30px;margin-right: 10px;" src="@/static/dingwei1.png" alt="">
						<view style="width: 88%;">
							<view>{{info.rept_province + info.rept_province + info.rept_district + info.rept_detail}}</view>
						</view>
					</view>
					<view><img @click="toMap(info,1)" style="width: 20px;height: 20px;" src="@/static/daohang.png" alt=""></view>
				</view>
			</view>
			<view class="store" v-if="[2].indexOf(info.status)>=0" style="margin-top: 10px;">
				<view>请送至以下地址</view>
				<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px;">
					<view style="display: flex;align-items: center;width: 88%;flex-wrap: nowrap;">
						<img style="width: 30px;height: 30px;margin-right: 10px;" src="@/static/dingwei1.png" alt="">
						<view style="width: 88%;">
							<view v-if="info.transfer_province">{{info.transfer_province + info.transfer_city + info.transfer_district + info.transfer_detail}}</view>
							<view v-else>{{info.rept_province + info.rept_province + info.rept_district + info.rept_detail}}</view>
						</view>
					</view>
					<view><img @click="toMap(info,2)" style="width: 20px;height: 20px;" src="@/static/daohang.png" alt=""></view>
				</view>
			</view>
			<view class="store" v-if="info.status === 4 && info.transfer_user" style="margin-top: 10px;">
				<view>服务门店</view>
				<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px;">
					<view style="display: flex;align-items: center;width: 88%;flex-wrap: nowrap;">
						<img style="width: 30px;height: 30px;margin-right: 10px;" src="@/static/dingwei1.png" alt="">
						<view style="width: 88%;">
							<view style="font-weight: bold;margin-bottom: 8px;">{{!info.transfer_user ? (info.factory ? info.factory.factory_name : info.wash_store.store_name) : info.outlet.outlet_name}}</view>
							<view style="width: 88%;">
								<view v-if="info.transfer_province">{{info.transfer_province + info.transfer_city + info.transfer_district + info.transfer_detail}}</view>
								<view v-else>{{info.rept_province + info.rept_province + info.rept_district + info.rept_detail}}</view>
							</view>
						</view>
					</view>
					<view><img @click="callPhone(info)" style="width: 20px;height: 20px;" src="@/static/dianhua.png" alt=""></view>
				</view>
			</view>
			<view class="store" v-if="[6,7].indexOf(info.status)>=0" style="margin-top: 10px;">
				<view>服务门店</view>
				<view style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px;">
					<view style="display: flex;align-items: center;width: 88%;flex-wrap: nowrap;">
						<img style="width: 30px;height: 30px;margin-right: 10px;" src="@/static/dingwei1.png" alt="">
						<view style="width: 88%;">
							<view style="font-weight: bold;margin-bottom: 8px;">{{!info.transfer_user ? (info.factory ? info.factory.factory_name : info.wash_store.store_name) : info.outlet.outlet_name}}</view>
							<view style="width: 88%;">
								<view v-if="info.transfer_province">{{info.transfer_province + info.transfer_city + info.transfer_district + info.transfer_detail}}</view>
								<view v-else>{{info.rept_province + info.rept_province + info.rept_district + info.rept_detail}}</view>
							</view>
						</view>
					</view>
					<view><img @click="callPhone(info)" style="width: 20px;height: 20px;" src="@/static/dianhua.png" alt=""></view>
				</view>
			</view>
			<view class="statusText" v-if="[6,7].indexOf(info.status)>=0">
				<view style="display: flex;align-items: center;"> <img style="width: 18px;height: 20px;margin-right: 8px;" src="@/static/washing.png" alt=""> 洗涤状态：正在进行   {{info.wash_sub_name}}</view>
			</view>
			<view class="goodsList">
				<view v-for="(demo,idx) in info.detail" :key="idx" class="goodsItem">
					<view style="display: flex;">
						<img style="width: 50px;height: 50px;border-radius: 4px;margin-right: 10px;" :src="demo?.commodity_pic" alt="">
						<view style="height: 50px;color: #7c7c7c;width: 200px">
							<view class="nameText">{{demo.commodity_name}}</view>
							<view style="margin-top: 5px;">×{{demo.commodity_num}}</view>
						</view>
					</view>
					<view style="font-weight: bold;">￥{{demo?.unit_fee}}</view>
				</view>
				<view style="display: flex;justify-content: space-between;font-size: 12px;padding: 15px 0;">
					<view>使用优惠券</view>
					<view style="font-weight: bold;">￥{{info.coupon_price}}</view>
				</view>
				<view style="display: flex;justify-content: space-between;font-size: 12px;padding: 15px 0">
					<view>总计价格</view>
					<view style="font-weight: bold;">￥{{info.payment}}</view>
				</view>
			</view>
			<view class="orderMessage">
				<view>订单号：{{info.order_no}}</view>
				<view style="margin: 5px 0;">下单时间：{{info.created_at}}</view>
				<view>支付方式：{{info.pay_type === 1?'微信支付':'会员卡支付'}}</view>
			</view>
		</view>
		<view class="lookExpress" v-if="showExpress" @click="showExpress = false">
			<view class="express" @click.stop>
				<view style="font-size: 14px;font-weight: bold;margin-bottom: 15px;">物流信息</view>
				<uniSteps :options="expressData" direction="column" :active="3"></uniSteps>
				<view style="width: 100%;display: flex;justify-content: center;">
					<view class="close" @click="showExpress = false">关闭</view>
				</view>
			</view>
		</view>
		<view class="tabsBar">
			<view class="bottomBox">
				<view class="priceBox">
					<button open-type="contact" type="default" class="kefuClass"><img style="width: 25px;height: 25px;margin-right: 7px;" src="@/static/kefu.png" alt=""></button>
					<view>￥{{info.total_price}}</view>
				</view>
				<view style="display: flex;align-items: center;">
					<view class="priceButton" v-if="[0,1,2,3,4].indexOf(info.status)>=0"  @click="cancelReptOrder">取消订单</view>
					<view class="priceButton" v-if="info.status === 0" @click="payOrder">立即支付</view>
					<view class="priceButton" v-if="[14].indexOf(info.status)>=0" @click="submitReptOrder">确认收货</view>
					<view class="priceButton" v-if="[14].indexOf(info.status)>=0" @click="toAfter">申请售后</view>
					<view class="priceButton" v-if="[20].indexOf(info.status)>=0" @click="returnAfter">取消售后</view>
				</view>
			</view>
		</view>
		<view class="payMethods" v-if="pay" @click="closeModal">
			<view class="payContent" @click.stop>
				<view style="font-size: 16px;font-weight: bold;">选择支付方式</view>
				<view style="color: #7c7c7c;margin: 10px 0 15px;font-size: 14px;">会员卡余额：￥{{vip_card_balance}}</view>
				<view>
					<radio-group @change="selectPay">
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<view style="display: flex;align-items: center;">
								<radio color="#2c6cf4" style="transform:scale(0.7)" :value="2" :checked="payType === 2" />
								<view>会员卡支付</view>
							</view>
							<view style="display: flex;align-items: center;font-size: 14px;color: red;" @click="toVip" v-if="Number(vip_card_balance) < Number(info.total_price)">
								<view style="margin-right: 5px;">余额不足,去充值</view>
								<image style="width: 20px;margin: 0;height: 20px;"  src="../../static/right.png"></image>
							</view>
						</view>
						<view style="display: flex;align-items: center;margin-top: 10px;">
							<radio color="#2c6cf4" style="transform:scale(0.7)" :value="1" :checked="payType === 1" />
							<view>微信支付</view>
						</view>
					</radio-group>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { reptOrder, orderCancle, orderPay,getUserInfo, orderRefundCancle } from '@/api/home.js'
	import uniSteps from '@/uni_modules/uni-steps/components/uni-steps/uni-steps.vue';
	export default{
		components:{
			uniSteps
		},
		data() {
			return {
				pay: false,
				info:{},
				payType:2,
				showExpress: false,
				expressData:[],
				vip_card_balance:''
			}
		},
		onShow() {
			getUserInfo().then(res=>{
				this.vip_card_balance = res.data.vip_card_balance
			})
		},
		onLoad(options) {
			let config = JSON.parse(options.data)
			if(config.waybill_route2) config.waybill_route2 = JSON.parse(config.waybill_route2)
			if(config.waybill_route) config.waybill_route = JSON.parse(config.waybill_route)
			if(config.refund_status === 1){
				config.status = 20
			}
			if(config.refund_status === 2){
				config.status = 25
			}
			if(config.refund_status === 3){
				config.status = 30
			}
			if(config.refund_status === 4){
				config.status = 35
			}
			this.info = config
		},
		methods:{
			removeLastThreeChars(str) {
			  if(str) return str.slice(0, -3);
			},
			closeModal(){
				this.pay = false
			},
			lookExpress(data){
				this.expressData = data
				this.showExpress = true
			},
			selectPay(e){
				this.payType = Number(e.target.value)
			},
			getStatus(key){
				let list = [
					{ key:0, text:'待付款'},
					{ key:1, text:'待清洗'},
					{ key:2, text:'待清洗'},
					{ key:3, text:'待清洗'},
					{ key:4, text:'待清洗'},
					{ key:5, text:'待清洗'},
					{ key:6, text:'清洗中'},
					{ key:7, text:'清洗中'},
					{ key:8, text:'清洗中'},
					{ key:9, text:'清洗中'},
					{ key:10, text:'待收件'},
					{ key:11, text:'待收件'},
					{ key:12, text:'已完成'},
					{ key:13, text:'已取消'},
					{ key:14, text:'待收件'},
					{ key:20, text:'退款/售后'},
					{ key:25, text:'退款/售后'},
					{ key:30, text:'退款/售后'},
					{ key:35, text:'退款/售后'},
				]
				return list.find(item=>{ return item.key === key })?.text
			},
			toAfter(){
				uni.navigateTo({
					url:'/pages/afterSales/index?info='+JSON.stringify(this.info)
				})
			},
			callPhone(info) {
				let phone = !info.transfer_user ? (info.factory ? info.factory.phone : info.wash_store.phone) : info.outlet.phone
				uni.makePhoneCall({
					phoneNumber: phone, // 电话号码
					success: function () {
					  console.log('拨打电话成功');
					},
					fail: function (err) {
					  console.log('拨打电话失败：', err);
					}
				});
			},
			payOrder() {
				if(!this.pay){
					if(Number(this.vip_card_balance) < Number(this.info.total_price)){
						this.payType = 1
					}
					this.pay = true
					return
				}
				orderPay({
					orderNo:this.info.order_no,
					payType:this.info.pay_type,
				}).then(rs=>{
					const data = rs.data
					wx.requestPayment({
						...data,
						success(res) {
							uni.showToast({
							  title: '支付成功',
							  icon: 'success'
							});
							uni.$emit('refreshPage', {});
							uni.navigateBack({delta:1})
						},
						fail(err) {
							uni.showToast({
							  title: '支付失败',
							  icon: 'none'
							});
						}
					})
				})
			},
			toMap(info){
				uni.openLocation({
					latitude: Number(info.transfer_lat || info.rept_lat),//纬度
					longitude: Number(info.transfer_lng || info.rept_lng),//经度
					name: info.transfer_name || info.rept_name,
					address: info.transfer_detail || info.rept_detail
				});
			},
			returnAfter(){
				let that = this
				uni.showModal({
					title: '',
					content: '确定取消售后吗？',
					cancelText:"取消",
					confirmText:"确定",
					success(res) {
						if (res.confirm) {
						  orderRefundCancle({orderNo:that.info.order_no}).then(rs=>{
							if(rs.code === 200) {
								uni.$emit('refreshPage', {});
								uni.navigateBack({delta:1})
							}
						  })
						}	
					}
				})
			},
			cancelReptOrder(){
				let that = this
				uni.showModal({
					title: '',
					content: '确定取消订单吗？',
					cancelText:"取消",
					confirmText:"确定",
					success(res) {
						if (res.confirm) {
						  orderCancle({orderNo:that.info.order_no}).then(rs=>{
							if(rs.code === 200) {
								uni.$emit('refreshPage', {});
								uni.navigateBack({delta:1})
							}
						  })
						}	
					}
				})
			},
			submitReptOrder(){
				let that = this
				uni.showModal({
					title: '',
					content:'确认收货？',
					cancelText:"取消",
					confirmText:"确定",
					success(res) {
						if (res.confirm) {
						  reptOrder({orderNo:that.info.order_no}).then(rs=>{
							if(rs.code === 200) {
								uni.navigateBack({delta:1})
							}
						  })
						}	
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	/deep/ ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
	.nameText{
		width: 100%;
		overflow:hidden;//超出的隐藏
		text-overflow:ellipsis;//省略号
		white-space:nowrap;//强制一行显示
	}
	.lookExpress{
		position: fixed;
		z-index: 200;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.4);
		display: flex;
		align-items: center;
		justify-content: center;
		.express{
			width: 80%;
			background-color: #fff;
			border-radius: 4px;
			padding: 20px;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}
	.close{
		background-color: #2c6cf4;
		text-align: center;
		font-size: 12px;
		margin-top: 15px;
		color: #f2f2f2;
		width: 50px;
		/* text-align: center; */
		padding: 5px 10px;
		border-radius: 4px;
	}
	.kefuClass::after {
		border: none;
		height: 0!important;
	}
	.kefuClass {
		position: relative;
		text-align: left;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-decoration: none;
		line-height: 1.35;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000;
		font-size: 14px;
		background-color: #fff;
		width: 100%;
	}
	.address{
		background-color: #fff;
		border-radius: 4px;
		padding: 10px;
		margin-top: 10px;
		font-size: 12px;
	}
	.tabsBar{
		padding: 10px;
		box-sizing: border-box;
		.bottomBox{
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			.priceBox{
				height: 36px;
				display: flex;
				align-items: center;
			}
			.resetButton{
				padding: 5px 10px;
				border:1px solid #dcdcdc;
				color: #dcdcdc;
				font-size: 12px;
				border-radius: 6px;
				margin-left: 10px;
			}
			.priceButton{
				padding: 5px 10px;
				border:1px solid #2c6cf4;
				color: #2c6cf4;
				font-size: 12px;
				border-radius: 6px;
				margin-left: 10px;
			}
		}
	}
	.line{
		position: absolute;
		width: 1px;
		background-color: #2c6cf4;
		height: 50%;
		left: 10px;
		top: 14px;
	}
	.round{
		width: 20px;
		height: 20px;
		display: flex;
		font-size: 12px;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		color: #fff;
		margin-right: 10px;
		background-color: #2c6cf4;;
	}
	.store{
		background-color: #fff;
		border-radius: 4px;
		padding: 10px;
		font-size: 12px;
		margin-bottom: 10px;
	}
	.orderMessage{
		background-color: #fff;
		border-radius: 4px;
		padding: 10px;
		margin-top: 10px;
		font-size: 12px;
		display: flow-root;
	}
	.goodsList{
		background-color: #fff;
		border-radius: 4px;
		padding: 0 10px 15px;
		font-size: 14px;
		margin-top: 10px;
		display: flow-root;
		.goodsItem{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f2f2f2;
			padding-bottom: 15px;
			margin-top: 15px;
			
		}
	}
	.statusText{
		font-size: 12px;
		display: flex;
		background-color: #fff;
		border-radius: 4px;
		padding: 10px;
		box-sizing: border-box;
	}
	.orderDetail{
		height: 100vh;
		overflow: hidden;
	}
	.content{
		height: calc(100vh - 100px);
		overflow: auto;
		padding: 0 10px 10px;
		box-sizing: border-box;
	}
	.status{
		background-color: #fff;
		padding: 10px;
		text-align: center;
		box-sizing: border-box;
		font-size: 12px;
		border-top: 1px solid #f2f2f2;
	}
	.tabsBar{
		height: 80px;
		background: #fff;
		border-top: 1px solid #f2f2f2;
	}
	.payMethods{
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 100;
		background-color: rgba(0,0,0,0.3);
		height: calc(100vh - 60px);
		display: flex;
		align-items: flex-end;
		.payContent{
			background-color: #fff;
			width: 100%;
			border-bottom: 1px solid #f2f2f2;
			padding: 15px;
			box-sizing: border-box;
		}
	}
</style>